<template>
  <div class="home-layout">
    <div class="home-container">
      <div class="home-row">
        <!-- 通知/公告栏 -->
        <el-card class="flex-basis-996px !rounded-16px tab-list">
          <tabList />
        </el-card>
        <!-- 课程中心栏 -->
        <el-card class="flex-basis-582px !rounded-16px tab-list">
          <courseList />
        </el-card>
      </div>
      <!-- 工作流程栏 -->
      <div class="home-row"><bpmStatus /> </div>
      <!-- 统计,日程栏 -->
      <div class="home-row"><reportAndCalendar /> </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useUserStore } from '@/store/modules/user'
import { useRouter } from 'vue-router'
import tabList from './components/tabList/index.vue'
import courseList from './components/courseList/index.vue'
import bpmStatus from './components/bpmStatus/index.vue'
import reportAndCalendar from './components/reportAndCalendar/index.vue'
defineOptions({ name: 'Index' })

const router = useRouter()
const userStore = useUserStore()
const loading = ref(true)

// const getAllApi = async () => {
//   await Promise.all([
//     getCount(),
//     getProject(),
//     getNotice(),
//     getShortcut(),
//     getUserAccessSource(),
//     getWeeklyUserActivity()
//   ])
//   loading.value = false
// }

const handleProjectClick = (message: string) => {
  window.open(`https://${message}`, '_blank')
}

const handleShortcutClick = (url: string) => {
  router.push(url)
}

// getAllApi()
</script>

<style lang="scss" scoped>
.home-layout {
  display: flex;
  width: 100%;
  // height: $content-height;
  justify-content: center;
  margin-top: -4px;
}

.home-container {
  display: flex;
  width: 1602px;
  // height: $content-height;
  flex-direction: column;
  flex-shrink: 0;
  row-gap: 16px;

  .home-row {
    display: flex;
    width: 100%;
    gap: 24px;
  }

  .tab-list {
    :deep() {
      .el-card__body {
        padding-top: 4px;
      }
    }
  }

  :deep(.el-empty__image) {
    width: 120px;
  }

  :deep() {
    .el-tabs__nav-scroll {
      margin: 0;
    }
  }
}
</style>
